<template>
  <div class="wrap">
    <a-button class="button-interval" type="primary" :icon="h(SearchOutlined)" @click="showMsg()"
      >点击</a-button
    >
    <a-button class="button-interval" type="primary" @click="showMsg()">点击</a-button>
    <a-button class="button-interval" type="primary" danger @click="list">点击</a-button>
    <BaseTitle />
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="Username"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username">
          <template #addonBefore>
            <setting-outlined />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password" />
      </a-form-item>

      <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
        <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
  <div style="margin: 0 16px">
    <!-- <BasicTable loading="aaaa" :dataSource="data" :columns="columns" :current="3" /> -->
    <a-table
      :loading="loading"
      :dataSource="data"
      :columns="columns"
      @change="handleTableChange"
      :pagination="pagination"
      size="middle"
      :title="title"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'index'">
          <a-progress :percent="index" size="small" />
        </template>
        <template v-if="column.key === 'operation'">
          <a-button
            class="button-interval"
            type="link"
            :icon="h(FileTextOutlined)"
            size="small"
            @click="getRaw(record)"
          >
            查看
          </a-button>
          <a-button
            class="button-interval"
            type="link"
            :icon="h(DeleteOutlined)"
            size="small"
            @click="getRaw(record)"
          >
            删除
          </a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
  import { useMessage } from '/@/hooks/web/useMessage'
  import { h, ref, unref, computed, onMounted, getCurrentInstance } from 'vue'
  import {
    SearchOutlined,
    DeleteOutlined,
    InfoOutlined,
    FileTextOutlined,
    SettingOutlined,
  } from '@ant-design/icons-vue'
  import { getUserList } from '/@/api/sys/user'
  import { GetUserListModel } from '/@/api/sys/model/userModel'
  // const { message, modal, notification } = App.useApp()
  // import { App } from 'ant-design-vue'
  import { BaseTitle } from '/@/components/Title'

  import useCurrentInstance from '/@/utils/useCurrentInstance'

  const { createConfirm } = useMessage()

  const loading = ref(false)
  const keyword = ref('')

  const formState = ref({ username: '', password: '', remember: false })
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      fixed: 'left',
      key: 'index',
      width: 80,
    },
    {
      title: '姓名',
      dataIndex: 'realName',
      key: 'realName',
      customCell: (text) => (text ? (text == '周沈斌' ? '我变变变' : text) : '--'),
    },
    {
      title: '年龄',
      dataIndex: 'userName',
      key: 'userName',
      customCell: (record) => {
        if (!record) record.userName = '--'
        if (record.userName === 'admin3') record.userName = '我变@'
      },
    },
    {
      title: '住址',
      dataIndex: 'userTel',
      key: 'userTel',
    },
    {
      title: 'Action',
      key: 'operation',
      fixed: 'right',
      width: 165,
    },
  ]

  onMounted(() => {
    // 发送网络请求
    list()
  })

  const onFinish = (values: any) => {
    console.log('Success:', values)
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }

  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 2,
    size: '',
    showSizeChanger: false,
    showQuickJumper: false,
  })
  let data = ref<GetUserListModel[]>([])

  function rander(record) {
    console.log(record)
    if (record.userName === 'admin3') {
      return
    }
  }
  const { proxy } = useCurrentInstance()
  // const { proxy } = getCurrentInstance() as ComponentInternalInstance
  function getRaw(record) {
    proxy.$message.success('芽芽')
    console.log('record', record)
  }
  function title(currentPageData) {
    console.log(currentPageData)
    return '表格标题'
  }
  function showMsg() {
    createConfirm({
      iconType: 'info',
      title: '标题',
      content: '我弹一个框试试',
      onOk: async () => {
        console.log(11)
      },
    })
  }
  const pageParam = computed(() => ({
    query: {
      keyword: unref(keyword),
    },
    current: pagination.value?.current,
    size: pagination.value?.pageSize,
  }))

  async function list() {
    loading.value = true
    const res = await getUserList(unref(pageParam))
    data.value = res.records
    console.log(res.current)
    console.log(pagination.value.current)
    pagination.value.total = res.total
    pagination.value.current = res.current
    loading.value = false
  }

  function handleTableChange(page) {
    pagination.value.current = page.current
    list()
  }
</script>

<style lang="scss" scoped>
  .table {
    // height: calc(100vh - 160px);
    // width: 500px;
    // display: flex;

    background-color: #e42a13;
  }
</style>
